<template>
    <div>
   <!-- 添加新行表单（以弹出框显示） -->
   <el-button type="primary" @click="showAddForm = true">添加</el-button>

<el-dialog
  title="添加新行"
  v-model="showAddForm"
  width="50%"
  :before-close="handleCancel"
>
  <el-form ref="addForm" :model="formModel" label-position="left" label-width="80px">
    <el-row>
      <el-col v-for="(column, index) in columns" :key="index" :sm="{ span: 24 / columns.length }">
        <el-form-item :label="column.label">
          <el-input v-model="formModel[column.prop]" :placeholder="column.prop"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="handleCancel">取消</el-button>
    <el-button type="primary" @click="handleAddSubmit">保存</el-button>
  </div>
</el-dialog>
<!-- 添加成功提示 -->
<el-message
    v-if="showSuccessMessage"
    type="success"
    :duration="2000"
  
  >
    添加成功！
  </el-message>
        <!-- table主体 -->
        <el-table :data="tableData" style="width: 100%">
            <template v-for="(column, index) in columns" :key="index">
                <el-table-column :prop="column.prop" :label="column.label" :width="column.width || ''"></el-table-column>
            </template>
        </el-table>
       <!-- 添加新行表单
    <el-form ref="addForm" :model="formModel" label-position="left" label-width="80px" @submit.prevent="handleAddSubmit">
      <el-row>
        <el-col v-for="(column, index) in columns" :key="index" :sm="{span: 24 / columns.length}">
          <el-form-item :label="column.label">
            <el-input v-model="formModel[column.prop]" :placeholder="column.prop"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" @click="handleAddSubmit">添加</el-button>
    </el-form> -->
      
    </div>
</template>
  
<script setup>
// import { ref, computed,onMounted } from 'vue';
//   import axios from 'axios';
import { getPermission,addPermission} from '../../../api'
import { transColumn } from '../../../api/tableApi';
// import router from '../../../router/router';

// import { useRoute } from 'vue-router';

const route = useRoute();

// const router = useRouter();
// import './role.css';
const tableData = ref([]);
const columns = ref([]);
const formModel = ref({}); // 表单数据模型
const showAddForm = ref(false);
const showSuccessMessage = ref(false);
onMounted(async () => {
  console.log(route.meta)
  // console.log("query",route.params)
    try {
        const response = await getPermission();
        console.log(response);
        var resdata = response.data
        console.log(resdata)
        // totalRows = 800; // 获取总记录数
        //   return
        //  tableData.value = Object.freeze(resdata);
        tableData.value = resdata;
        // 动态生成表格列
               columns.value = transColumn(resdata);
    } catch (error) {
        console.error('Failed to fetch data:', error);
    }
});
//处理添加请求
async function handleAddSubmit() {
  try {
    console.log(formModel.value);
    const response = await addPermission(formModel.value);
    console.log(response);
    if (response.status === 200) {
      // tableData.value.push(response.data);
      formModel.value = {};
      showAddForm.value = false; // 关闭弹出框
      showSuccessMessage.value = true;
      // 可能需要额外操作，如刷新表格、显示成功提示等
    } else {
      console.error('添加失败:', response.statusText);
      // 处理添加失败的情况，如显示错误提示等
    }
  } catch (error) {
    console.error('添加过程中发生错误:', error);
    // 处理网络请求异常情况，如显示错误提示等
  }
}

// 取消添加操作，关闭弹出框
function handleCancel() {
  formModel.value = {};
  showAddForm.value = false;
}
</script>